<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 获取右侧胶囊位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const top = menuButtonInfo.top + menuButtonInfo.height + 10
let intervalId
const count = ref(5)

// 方法
const toHome = () => {
  uni.switchTab({ url: '/pages/home/index' })
  clearInterval(intervalId)
}

const startCountdown = () => {
  intervalId = setInterval(() => {
    if (count.value > 0) {
      count.value--
    } else {
      toHome()
    }
  }, 1000)
}

onMounted(() => {
  startCountdown()
})

onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId)
  }
})
</script>

<template>
  <view class="welcome">
    <image src="../../static/images/common/logo.png" mode="aspectFill" />
    <view @tap="toHome" class="jump" :style="{ top: top + 'px' }">
      {{ `跳过(${count}s)` }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
.welcome {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #ea5506;
  padding: 508rpx 36rpx 0;
  image {
    width: 100%;
    height: 186rpx;
  }
  .jump {
    position: absolute;
    right: 20rpx;
    box-sizing: border-box;
    padding: 10rpx;
    border-radius: 10rpx;
    background: rgba(0, 0, 0, 0.7);
    color: #f2f2f2;
  }
}
</style>
